<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="{ children: 'children', label: 'deviceName' }"
          highlight-current
          default-expand-all
          node-key="deviceId"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-form inline size="small">
          <el-form-item label="查询范围">
            <el-date-picker
              v-model="query.date"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getData">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
            <help />
          </el-form-item>
        </el-form>
        <div ref="echarts" style="width: 100%; height: 600px"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import statisticsApi from '@/api/worm/statistics'

export default {
  data() {
    return {
      treeData: [],
      query: {
        date: [
          this.$moment().subtract(15, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          this.$moment().format('YYYY-MM-DD HH:mm:ss')
        ],
        deviceId: ''
      },
      selectDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = (15 * 24 * 3600 - 1) * 1000 // 00:00:00 到23:59:59
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      statisticsApi.wormList().then((res) => {
        let list = []
        for (let i in res.data) {
          list.push({ deviceName: i, children: res.data[i] })
        }
        this.treeData = list
        if (this.treeData[0].children[0].deviceId) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.treeData[0].children[0].deviceId)
          })

          this.deviceId = this.treeData[0].children[0].deviceId
          this.getData()
        }
      })
    },
    handleNodeClick(data) {
      this.query.deviceId = data.deviceId
      this.getData()
    },
    getData() {
      if (this.query.deviceId) {
        this.query.startTime = this.query.date ? this.query.date[0] : ''
        this.query.endTime = this.query.date ? this.query.date[1] : ''
        statisticsApi.getWormStatisticsByGroup(this.query).then((res) => {
          const label = res.data.data[0] ? res.data.data[0].wornData.map((e) => e.name) : []
          const value = res.data.data[0] ? res.data.data[0].wornData.map((e) => e.num) : []
          const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: label,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                type: 'bar',
                barWidth: '30%',
                data: value
              }
            ]
          }
          const echarts = this.$echarts.init(this.$refs.echarts)
          echarts.setOption(option, true)
        })
      }
    },
    handleReset() {
      this.query.date = [
        this.$moment().subtract(15, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        this.$moment().format('YYYY-MM-DD HH:mm:ss')
      ]
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped></style>